<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // ES6
    // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

    // 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

    // 数组解构  => 对应下标解构
    // 对象解构  => 对应键名解构

    // var obj = { a: 1, b: 2, c: 3 };

    // 完全解构
    // var { a, b, c } = { a: 1, b: 2, c: 3 };
    // console.log(a, b, c);

    // var zhang = { name: "张三", age: 18, class: "2210", height: "173cm", weight: "70kg" };
    // var { name, age, class: _class, height, weight } = zhang;
    // console.log(name, age, _class, height, weight);

    // 不完全解构
    // var { a, c } = { a: 1, b: 2, c: 3 };
    // console.log(a, c);

    // 如果解构不成功，变量的值就等于undefined。
    // var { a, b, c, d } = { a: 1, b: 2, c: 3 };
    // console.log(a, b, c, d);

    // 在解构过程中,可以给变量设置默认值
    // var { a = 0, b = 0, c = 0, d = 0 } = { a: 1, b: 2, c: 3 };   // d = d === undefined ? 0 : d
    // console.log(a, b, c, d);

    // var { a = 0, b = 0, c = 0, d = 0 } = {};
    // console.log(a, b, c, d);

    // var { a = 0, b = 0, c = 0, d = 0 } = { a: 1, b: null, c: undefined, d: NaN };
    // console.log(a, b, c, d);


    // 对象解构需要注意的问题: (无法对 null和undefined解构)
    // var { a, toFixed } = 1;  // new Number(1)
    // console.log(a, toFixed);

    // var { a } = null;
    // console.log(a);

    // var { a } = undefined;
    // console.log(a);



    // 对象解构的高级用法:
    // (1) 对象解构 配合 扩展运算符(...) => Rest(合并剩余参数)
    // var { a, b, ...c } = { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }
    // a=1  b=2  ...c=>c: 3, d: 4, e: 5, f: 6
    // console.log(a, b, c);

    // var { e, d, ...c } = { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }
    // e=5  b=4  ...c=>a: 1, b: 2, c: 3, f: 6
    // console.log(e, d, c);




    // 报错  Rest element must be last element
    // var { a, ...c, b } = { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }
    // a=1  b=2  ...c=>c: 3, d: 4, e: 5, f: 6
    // console.log(a, b, c);


    // (2)  对象嵌套 数组和对象时进行解构
    // 注意: 
    // 如果需要对 对象 的属性值进行二次解构,需要对应键名解构键值
    var zhang = {
        name: "张三",
        age: 18,
        class: "2210",
        info: {
            height: "173cm",
            weight: "70kg"
        },
        grade: [55, 66, 77]
    };

    // var { name, age, class: _class, info, grade } = zhang;
    // console.log(name, age, _class, info, grade);

    // var { height, weight } = info;
    // console.log(height, weight);

    // var [ch, mh, eh] = grade;
    // console.log(ch, mh, eh);

    var { name, age, class: _class, info: { height, weight }, grade: [ch, mh, eh] } = zhang;
    console.log(name, age, _class, height, weight, ch, mh, eh);

    var { name, age, class: cls, info: { height, weight }, grade: [ch, mh, eh] } = zhang;
    console.log(name, age, _class, height, weight, ch, mh, eh);



    var data = [{ a: 1 }, { b: 2 }, { c: 3 }]

    var [{ a }, { b }, { c }] = data;








</script>

</html>